<template>
	<view class="page-homelinke">
	  <view class="page-homelinke-text"><text>{{ title }}</text></view>
	  <view class="page-homelinke-wxparse">
	  	<wxParse :content="article" :className="className" :imageProp="imageProp" @preview="preview" @navigate="navigate" />
	  </view>
	</view>
</template>

<script>
  // 本示例引用组件为三方的mpvue-wxparse，该组件为开源mit协议，如有新需求可自行改动完成或联系原作者
	import marked from '@/components/marked';
	import wxParse from '@/components/mpvue-wxparse/src/wxParse.vue';
  import api from '@/common/api.js';   //请求API方法
	export default {
		components: {
			wxParse
		},
		data() {
			return {
				article: '',
				className: 'page-homelinke-content',
				title:'',
				imageProp: {
					mode: 'aspectFit',
					padding: '45upx',
					lazyLoad: true,
					domain: 'http://img.malicn.com'
				}
			}
		},
		onLoad(option) {
			this.getBananerInfo(option.id);
		},
		methods: {
			getBananerInfo(id){
        api.httpRequest('/wechat/home/linksDetail/'+id,null,"GET").then(res => {
					this.article=marked(res.result.content);
					this.title=res.result.title;
				})
			},
			preview(src, e) {
				// do something
				console.log("src: " + src);
			},
			navigate(href, e) {
				// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
				console.log("href: " + href);
				uni.showModal({
					content : "点击链接为：" + href,
					showCancel:false
				})
			}
		}

	}
</script>

<style>
	@import url("../../components/mpvue-wxparse/src/wxParse.css");
	.page-homelinke{
		background-color: #ffffff;
		width:100vw;
		min-height: 100vh;
		padding-top: 40upx;
		box-sizing: border-box;
		padding-bottom: 20upx;
	}
	.page-homelinke-text{
		text-align: center;
		padding-top: 40upx;
	}
	.page-homelinke-text text{
		font-size: 38upx;
		font-weight: bold;
		color: #1a1a1a;
	}
	.page-homelinke-wxparse{
		padding-top: 30upx;
	}
	.page-homelinke-content {
		margin-left: 45upx;
		margin-right: 45upx;
		color: #333333;
		line-height: 20upx;
		font-size: 30upx;
		padding-top: 30upx;
	}
</style>
